<script setup lang="ts">
import { reactive, ref, defineExpose } from 'vue'
import { refreshPage } from '@/utils/common'
import { resetPasswordApi } from '@/api/member'
import { smsTemplateCode } from '@/utils/constants'
import type { ResetPasswordParams } from '@/types/member'

const resetPwdRef = ref()
const form = reactive({
  email: '',
  verification_code: '',
  new_password: '',
}) as ResetPasswordParams

const formRules = {
  email: {
    rules: [
      { required: true, errorMessage: 'Please enter email' },
      {
        validateFunction: (rule: any, value: string, data: any, callback: Function) => {
          if (!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(value)) {
            return callback('Please enter a valid email format')
          }
        },
      }
    ]
  },
  verification_code: {
    rules: [{ required: true, errorMessage: 'Please enter verification code' }],
  },
  new_password: {
    rules: [
      { required: true, errorMessage: 'Please enter new password' },
      {
        validateFunction: (rule: any, value: string, data: any, callback: Function) => {
          if (!/^(?=.*[a-z])(?=.*[A-Z]).{8,}$/.test(value)) {
            return callback('Password must be at least 8 characters and contain both uppercase and lowercase letters')
          }
        },
      },
    ],
  },
}

const open = () => {
  resetPwdRef.value.open()
}

const formRef = ref()

// 发送验证码
const requestVerificationCode = () => {
  if (!form.email) {
    uni.showToast({
      title: 'Please enter email first',
      icon: 'none'
    })
    return
  }

  if (!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(form.email)) {
    uni.showToast({
      title: 'Incorrect email format',
      icon: 'none'
    })
    return
  }

  uni.showToast({
    title: 'Verification code sent',
    icon: 'success'
  })
}

const onSubmit = async () => {
  try {
    await formRef.value.validate()

    await resetPasswordApi(form)

    uni.showToast({
      title: 'Password reset successful',
      icon: 'success',
      mask: true,
    })

    setTimeout(() => {
      resetPwdRef.value.close()
      refreshPage()
    }, 1500)
  } catch (err) {
    console.log(err)
  }
}

defineExpose({ resetPwdRef, open })
</script>

<template>
  <uni-popup ref="resetPwdRef" type="dialog">
    <div class="reset-password-container">
      <div class="title">Password Recovery</div>
      <div class="subtitle">
        Please enter the email you registered on hlsclothing.net. A link will be sent to your email inbox to reset the password. If you need more help, please click.
      </div>

      <uni-forms ref="formRef" :model="form" :rules="formRules">
        <!-- Email -->
        <uni-forms-item name="email" class="form-item">
          <div class="input-label">Email Address</div>
          <uni-easyinput
            v-model="form.email"
            placeholder="Enter your email"
            class="input-field"
          />
        </uni-forms-item>

        <!-- Verification Code -->
        <uni-forms-item name="verification_code" class="form-item">
          <div class="input-label">Verification Code</div>
          <div class="verification-container">
            <uni-easyinput
              v-model="form.verification_code"
              placeholder="Enter verification code"
              class="verification-input"
            />
            <button :style="{ backgroundColor: form.email ? '#ff5f3c' : '#f9b0a0' }" class="send-code-btn" @tap="requestVerificationCode">Send Code</button>
          </div>
        </uni-forms-item>

        <!-- New Password -->
        <uni-forms-item name="new_password" class="form-item">
          <div class="input-label">New password</div>
          <uni-easyinput
            v-model="form.new_password"
            type="password"
            placeholder="Enter new password"
            class="input-field"
          />
        </uni-forms-item>

        <!-- Submit Button -->
        <button :style="{ backgroundColor: form.email && form.verification_code && form.new_password ? '#ff5f3c' : '#f9b0a0' }" class="submit-btn" @tap="onSubmit">Submit</button>
      </uni-forms>
    </div>
  </uni-popup>
</template>

<style lang="scss">
.reset-password-container {
  background-color: #fff;
  padding: 40rpx;
  width: 90vw;
  max-width: 600rpx;
  border-radius: 8rpx;

  .title {
    font-size: 30rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30rpx;
  }

  .subtitle {
    font-size: 24rpx;
    color: #666;
    text-align: center;
    margin-bottom: 40rpx;
    line-height: 1.5;
  }

  .form-item {
    margin-bottom: 30rpx;
  }

  .input-label {
    font-size: 24rpx;
    margin-bottom: 16rpx;
  }

  .input-field {
    width: 100%;

    :deep(.uni-easyinput__content) {
      background-color: #f5f7fa !important;
      border: 1px solid #dcdfe6 !important;
      border-radius: 4px !important;
      height: 80rpx !important;
    }
  }

  .verification-container {
    display: flex;
    gap: 20rpx;
    align-items: center;

    .verification-input {
      flex: 1;

      :deep(.uni-easyinput__content) {
        background-color: #f5f7fa !important;
        border: 1px solid #dcdfe6 !important;
        border-radius: 4px !important;
        height: 80rpx !important;
      }
    }

    .send-code-btn {
      width: 180rpx;
      height: 80rpx;
      line-height: 80rpx;
      background-color: #f9b0a0;
      color: #fff;
      font-size: 24rpx;
      border-radius: 4px;
      text-align: center;
    }
  }

  .submit-btn {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #f9b0a0;
    color: #fff;
    font-size: 28rpx;
    border-radius: 40rpx;
    margin-top: 40rpx;
    text-align: center;
  }
}
</style>
